<template>
  <a-row align="center" class="globalHeader" style="margin-bottom: 16px">
    <a-col flex="auto">
      <a-menu
        :default-selected-keys="selectedKeys"
        mode="horizontal"
        @menu-item-click="doMenuClick"
        position="top"
      >
        <a-menu-item
          key="0"
          :style="{ padding: 0, marginRight: '38px' }"
          disabled
        >
          <div class="title-bar">
            <div class="title">欢迎来到论坛</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visible" id="menu_content" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col class="title-left" flex="100px" style="flex-wrap: wrap">
      <a-dropdown trigger="hover">
        <a-avatar
          trigger-type="button"
          :imageUrl="store.state.user.loginUser.userAvatar"
        >
        </a-avatar>
        <div>{{ store.state.user.loginUser.userName }}</div>
        <template #content>
          <a-space
            v-if="store.state.user.loginUser.userRole === ACCESS_ENUM.NOT_LOGIN"
            direction="vertical"
          >
            <a-doption @click="login()">登录</a-doption>
            <a-doption @click="registe()">注册</a-doption>
          </a-space>
          <a-space v-else direction="vertical">
            <a-doption @click="goUserCenter">个人中心</a-doption>
            <a-doption @click="logout()">退出</a-doption>
          </a-space>
        </template>
      </a-dropdown>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import ACCESS_ENUM from "@/assets/accessEnum";
import { UserControllerService } from "../../generated";
import message from "@arco-design/web-vue/es/message";
import { routes } from "../router/routes";

const router = useRouter();
const route = useRoute();
const selectedKeys = ref(["/"]);

// 跳转之后的状态
router.afterEach((to, from, failure) => {
  console.log(to.path);
  selectedKeys.value = [to.path];
});

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

const store = useStore();

setTimeout(() => {
  store.dispatch("user/getLoginUser", {});
}, 3000);

// 处理不显示的组件
// 使用computed函数监听routes属性
const visible = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    return true;
  });
});
// 退出
const logout = async () => {
  const res = await UserControllerService.userLogoutUsingPost();
  if (res.code == 0) {
    message.success("退出成功");
    store.dispatch("user/getLoginUser", {});
    location.reload();
  } else {
    console.log(res);
    message.error("退出失败");
  }
};
// 登录
const login = () => {
  router.push({
    path: "/user/login",
    query: { redirect: router.currentRoute.value.fullPath },
  });
};
// 登录
const registe = () => {
  router.push({
    path: "/user/register",
    query: { redirect: router.currentRoute.value.fullPath },
  });
};

const goUserCenter = () => {
  router.push({
    path: "/user/center/",
  });
};
</script>

<style scoped>
.globalHeader {
  box-sizing: border-box;
  width: 100%;
  background-color: rgb(255, 255, 255);
  position: sticky;
  top: 0;
}

.globalHeader .title-bar {
  display: flex;
  align-content: center;
}

.globalHeader .title {
  color: #444444;
  margin-left: 16px;
  font-size: 18px;
  line-height: 48px;
}

.globalHeader img {
  height: 48px;
}

.title-left {
  font-size: 1.2vw;
  color: #444444;
}

.globalHeader #menu_content {
  font-size: 1vw;
  margin-left: 1.5vw;
  font-weight: 500;
}
</style>
